<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点格子</title>

    <!-- vue -->
    <script src="./assets/js-vue/vue.js"></script>
    <!--element-->
    <link rel="stylesheet" type="text/css" href="./assets/js-vue/element/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <script src="./assets/js-vue/element/index.js"></script>
    <script type="text/javascript" src="./assets/jquery-3.6.1.min.js"></script>
    <!--公共方法-->
    <script type="text/javascript" src="./utils/common.js"></script>
    <!--请求封装-->
    <script type="text/javascript" src="utils/myAjax.js"></script>

    <style>
        .container{
            width: 800px;
            height: 800px;
            display: flex;
            flex-wrap: wrap;
        }

        .box{
            border: red solid 1px;
            /*background-color: #5daf34;*/
        }
        .color{
            background-color: red;
        }



    </style>


</head>
<body>


    <div id="app">
        <!--<div>  <el-button type="primary" @click=" start()">开始</el-button></div>-->
            <div class="container" >
                <div v-for = "(item,index) in boxList" class="box" :style="{width:width,height:height}" :class="{color:boxList[index] == 2}" @click="change(index)">

                </div>
            </div>
    </div>


<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data(){
            return{
                boxList:[],
                rand:0,
                width:0,
                height:0,
            }
        },
        created(){
            this.rand = this.getRandomNumber(10,18);
            this.boxList = Array(this.rand * this.rand).fill('');
            this.boxList = [...this.boxList];
            this.width =  (800 / this.rand) -3   +'px';
            this.height= (800 /  this.rand)  -3 +'px';
        },
        methods:{

            getRandomNumber(min, max) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() * (max - min + 1)) + min;
            },

            change(index){
                this.boxList[index] = 2;
                this.boxList = [...this.boxList]

            }
        }
    })

</script>



</body>
</html>